<template>
  <div class="consulation-wrapper">
    <mt-loadmore :top-method="loadTop" :bottom-method="loadBottom" ref="loadmore">
      <ul>
        <li  v-for="content in ConsulationList" :key="content.id" @click="queryDetail(content.id, content.informationTitle)" class="content">
          <consulation-item :content="content"></consulation-item>
        </li>
      </ul>
    </mt-loadmore>
    <div ></div>
  </div>
</template>

<script>
import axios from '@/api/axiosApi'
import { Toast } from 'mint-ui'

import consulationItem from '@/base/consulationItem'

export default {
  data () {
    return {
      selected: '1',
      pageSize: 10,
      pageNum: 1,
      ConsulationList: []
    }
  },
  components: {consulationItem},
  methods: {
    _getConsulationInfo () {
      const _self = this
      axios.post('/information/findInformation', {
        pageSize: _self.pageSize,
        pageNum: _self.pageNum
      }, (data) => {
        if (data.length === 0) {
          Toast('没有更多了')
          if (_self.pageNum > 1) {
            _self.pageNum--
          }
          return
        }
        data.forEach(item => {
          if (item.informationIntro.length > 42) {
            item.informationIntro = item.informationIntro.substr(0, 42) + '...'
          }
        })
        if (_self.pageNum > 1) {
          _self.ConsulationList.concat(data)
        } else {
          _self.ConsulationList = data
        }
      })
    },
    queryDetail (id, title) {
      this.$router.push({
        path: `/wechat/consultationDetail/${id}`,
        query: this.$route.query,
        params: {
          metaTitle: title
        }
      })
    },
    loadTop () {
      this.pageNum = 1
      this._getConsulationInfo()
      setTimeout(() => {
        this.$refs.loadmore.onTopLoaded()
      }, 1000)
    },
    loadBottom () {
      this.pageNum++
      this._getConsulationInfo()
      setTimeout(() => {
        this.$refs.loadmore.onBottomLoaded()
      }, 1000)
    }
  },
  created () {
    this._getConsulationInfo()
  }
}
</script>

<style>
.mint-tab-item-label {
  font-size: 14px;
}
.mint-navbar .mint-tab-item {
  padding: 13px 0;
}
</style>

<style lang="stylus" scoped>
@import '~assets/stylus/variable.styl';

.consulation-wrapper {
  .content {
    padding-bottom: 18px;
  }
}
</style>

